<template>
  <div class="base-empty" :style="styles">
    <div class="content">
      <img :src="img" class="mb-10" />
      <span class="title">{{ title }}</span>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
@Component
export default class BaseEmpty extends Tools {
  @Prop()
  private title!: string;
  @Prop({ default: 500 })
  private height!: number;
  private img: string = require("@/assets/img/empty.png");
  /**
   * 设置高度
   */
  private get styles() {
    return {
      minHeight: this.height + "px"
    };
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'

.base-empty {
  min-height: 350px
  overflow: hidden
  display: flex
  align-items: center
  justify-content: center
  .content {
    display: flex
    flex-direction: column
    font-size: 14px
    color: $base-color
    .title {
      text-align: center
    }
  }
}
</style>
